import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { WeaLocaleProvider, WeaNewScroll, WeaInputLocale } from 'ecCom';

// import E9FreqUseMenuSetting from './E9FreqUseMenuSetting';
import E9FreqUseMenuSetting from './E9FreqUseMenuSettingNew';

const getLabel = WeaLocaleProvider.getLabel;
const getCurrentLabel = WeaInputLocale.getCurrentLabel;
const getMultiStrFromBase64 = WeaInputLocale.getMultiStrFromBase64;

@inject('portalThemeStore')
@observer
class E9FreqUseMenuContent extends React.Component {
  constructor(props) {
    super(props);
    this.getFreqUseMenu = this.getFreqUseMenu.bind(this);
    this.onFreqUseMenuClick = this.onFreqUseMenuClick.bind(this);
  }

  render() {
    const { portalThemeStore } = this.props;
    const { freqUseMenu = [], account } = portalThemeStore;
    const _freqUseMenu = toJS(freqUseMenu);
    const _account = toJS(account);

    return (
      <div className="e9header-freq-use-menu-content">
        <div style={{ padding: '5px 0' }}>
          <WeaNewScroll ecId={`${(this && this.props && this.props.ecId) || ''}_WeaNewScroll@dvuywz`} height="100%">
            <div className="e9header-freq-use-menu-items">
              {_freqUseMenu.map((item, index) => {
                const { infoid: id, menunamemultlang } = item;
                const name = getCurrentLabel(getMultiStrFromBase64(menunamemultlang));

                return (
                  <div key={index} data-id={id} className="e9header-freq-use-menu-item" title={name} onClick={() => this.onFreqUseMenuClick(item)}>
                    {name}
                  </div>
                );
              })}
            </div>
          </WeaNewScroll>
        </div>
        <div className="e9header-freq-use-menu-setting" title={getLabel(19653, '设置')} onClick={() => this.props.onVisibleChange(false)}>
          <E9FreqUseMenuSetting
            ecId={`${(this && this.props && this.props.ecId) || ''}_E9FreqUseMenuSetting@nmb9l5`}
            account={_account}
            callback={this.getFreqUseMenu}
          >
            <i className="wevicon-freq-use-menu-setting" />
            <span style={{ marginLeft: '5px' }}>{getLabel(19653, '设置')}</span>
          </E9FreqUseMenuSetting>
        </div>
      </div>
    );
  }

  getFreqUseMenu() {
    const { portalThemeStore } = this.props;
    portalThemeStore.getFreqUseMenu();
  }

  onFreqUseMenuClick(item) {
    this.props.onVisibleChange(false);

    let obj = { ...item };
    for (let k in item) {
      if (Object.prototype.hasOwnProperty.call(item, k)) {
        if (k == 'menulink') {
          obj.url = item[k];
        } else if (k == 'linktype') {
          if (item[k] == '0') {
            obj.target = 'mainFrame';
          } else {
            obj.target = '_blank';
          }
        }
      }
    }

    const { portalThemeStore } = this.props;
    portalThemeStore.onLoadMain(obj);
  }
}

export default E9FreqUseMenuContent;
